<template>
    <div>
        <div class="banner">
            <img src="@/index/indexbanner.png"/>
            <router-link to="/product">
                <span class="bannerBtn">了解详情</span>
            </router-link>
        </div>
        <div id="aside">
            <b-nav vertical class="w-25 Vnav" v-show="isShow" :class="{leftborder:toggel,noBoeder:!toggel}">
                <b-nav-item @click="visibelTower()">
                    <img src="@/index/asideIcon.png" class="towerTip"/>
                </b-nav-item>
                <div class="tower">
                    <b-nav vertical :class="{show:toggel,hidden:!toggel}">
                        <b-nav-item v-for="(item,index) of asideList" :key="index"
                        @mouseenter = "addClass(index)"
                        @mouseleave = "removeClass(index)">
                           <router-link :to="{path:item.route,query:{id:item.id}}">{{item.name}}</router-link>
                        </b-nav-item>
                    </b-nav>
                </div>
            </b-nav>
        </div>
        <div class="wrapper">
            <div class="floor1">
                <p class="title">定义作品集</p>
                <p class="sec-title">
                    入手大牌设计师正品，不必溢价，从设计到制造直线到家
                </p>
                <div class="imgBox">
                    <div class="leftImg">
                        <img src="@/index/1.png"/>
                    </div>
                    <ul class="rightImg">
                        <li v-for="(item,index) of topList" :key="index">
                            <img :src="item.pic1"/>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="floor2">
                <p class="title">我们的推荐</p>
                <p class="sec-title">
                    Discover the best Furniture
                </p>
                <div class="imgBox">
                    <ul class="goodsList">
                        <li v-for="(item,index) of testList" :key="index">
                            <router-link :to="{path:'/details',query:{id:item.id}}" >
                                <div class="goodsBox">
                                    <img :src="item.pic1"/>
                                </div>
                                <p class="goodsName">{{item.name}}</p>
                                <p class="goodsPrice">
                                    <span>￥{{item.price}}</span>
                                </p>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="floor3">
                <div class="imgBox">
                    <div>
                        <img src="@/index/banner(2).png"/>
                    </div>
                </div>
            </div>
            <div class="floor4">
                <ul>
                    <li v-for="(item,index) of bottomList" :key="index">
                        <img :src="item.url">
                        <p class="bottomTitle">
                            <span class="partFont">
                                {{item.part1}}<span class="part2">{{item.part2}}</span>{{item.part3}}
                            </span>
                        </p>
                        <router-link :to=item.route>
                            <p class="cilckBtn">
                                <span>点击查看</span>
                            </p>
                        </router-link>
                        <div class="cover">
                           <span class="content">敬请期待</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            isShow   : false,
            toggel   : true,
            asideList: [],
            topList:[
                {pic1:require('@/index/2.png')},
                {pic1:require('@/index/3.png')},
                {pic1:require('@/index/4.png')},
                {pic1:require('@/index/5.png')}
            ],
            testList:[],
            bottomList:[]
        }
    },
    methods: {
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 520) {
                this.isShow = true
            } else {
                this.isShow = false
            }
        },
        visibelTower(){
            this.toggel = !this.toggel
        },
        addClass(i){
            this.asideList[i].active = true
        },
        removeClass(i){
            this.asideList[i].active = false
        }
    },
    mounted () {
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeMount() {
        var newList1=[
                {route:'/bed',name:'床',active: false},
                {route:'/cabinet',name:'柜架',active: false},
                {route:'/sofa',name:'沙发',active: false},
                {route:'/endtable',name:'茶几',active: false},
                {route:'/desk',name:'书桌·餐桌',active: false},
                {route:'/lamps',name:'灯具',active: false},
                {route:'/',name:'预约设计师',active: false},
                {route:'/cooperate',name:'商业合作',active: false},
            ];
        var newList2=[
                {url:require('@/index/choiceness(1).png'),part1:'原',part2:'木',part3:'沙发',route:'/sofa'},
                {url:require('@/index/choiceness(2).png'),part1:'原',part2:'木',part3:'茶几',route:'/endtable'},
                {url:require('@/index/choiceness(3).png'),part1:'原',part2:'木',part3:'橱柜',route:'/cabinet'},
                {url:require('@/index/choiceness(4).png'),part1:'原',part2:'木',part3:'座椅',route:'/'},
            ];
        this.axios({
            url:`${this.$config.dataUrl}/api/v1/contents1/hot`,
            method:'get'
        }).then(res=>{
            var k=Math.ceil(res.data.data.length/8)
            for(var i=2;i<res.data.data.length;i+=k){
                this.testList.push(res.data.data[i])
            }
        })
        this.axios({
            url:`${this.$config.dataUrl}/api/v1/categories/list`,
            method:'get'
        }).then(res=>{
            var x=res.data.data.slice(2,3).concat(res.data.data.slice(3,4),res.data.data.slice(1,2))
            for(var i in newList1 ){
                this.asideList.push(Object.assign({},newList1[i],res.data.data[i]))
            }
            for(var j in newList2){
               this.bottomList.push(Object.assign({},newList1[j],x[j],newList2[j]))
            }
        })
    },
}

</script>

<style scoped lang="scss">
    @mixin clearfix() {
        &::after {
            display: block;
            clear  : both;
            content: '';
        }
    }
    @mixin wrapperStyle{
        width   : 12rem;
        margin  : 0 auto;
        position: relative;
        font-size: 0.16rem;
        @include clearfix();
         a{
            color: #666
        }
    }
    .banner{
        width        : 100%;
        height       : 12rem;
        margin-bottom: 0.64rem;
        position     : relative;
        img{
            width : 100%;
            height: 100%;
        }
        .bannerBtn{
            font-size  : 0.35rem;
            position   : absolute;
            width      : 2.40rem;
            height     : 0.68rem;
            line-height: 0.68rem;
            background : rgba(180,157,126,1);
            box-shadow : 0px 3px 7px 0px rgba(0, 0, 0, 0.36);
            text-align : center;
            color      : #ffffff;
            left       : 2.3rem;
            bottom     : 3.99rem;
            cursor     : pointer;
        }
    }

    .wrapper{
        @include wrapperStyle();
    }

    #aside{
        padding : 0.6rem 1rem;
        width   : 3.6rem;
        height  : 100vh;
        position: fixed;
        .nav-link{
            padding: 0.16rem 0.4rem;
        }
        .leftborder{
            border-left: 1px solid #cccccc !important;
        }
        .noBorder{
            border-left: 0
        }
        .show{
            transition: all 0.6s linear;
            left      : 0;
        }
        .hidden{
            transition: all 0.6s linear;
            left      : -3rem;
        }

    }

    .Vnav{
        position: fixed;
        top     : 12%;
        @include clearfix();
    }
    .towerTip{
        position: absolute;
        top     : 2.30rem;
        left    : -0.8rem;
    }
    .tower{
        position: relative;
        left    : 0;
        top     : -0.1rem;
        overflow: hidden;
        ul{
            position            : relative;
            padding-inline-start: 0;
        }
        a {
            font-size: 0.22rem;
            color    : #666
        }
        li:hover a{
            color: #b49d7e
        }
    }
    .title{
        font-size    : 0.40rem;
        color        : rgba(67,67,67,1);
        margin-bottom: 0.24rem;
    }
    .sec-title{
        font-size    : 0.25rem;
        color        : rgba(180,152,119,1);
        margin-bottom: 0.18rem;
    }
    .imgBox{
        display: flex;
        .leftImg{
            width     : 5.81rem;
            height    : 5.55rem;
            box-shadow: 0px 12px 21px 3px rgba(95,92,92,0.34);
            display   : inline-block;
            img{
                width : 100%;
                height: 100%
            }
        }
        .rightImg{
            display             : flex;
            float               : right;
            padding-inline-start: 0;
            width               : 6rem;
            flex-wrap           : wrap;
            margin-left         : 0.16rem;
            li{
                list-style: none;
                width     : 2.77rem;
                height    : 2.62rem;
                margin    : 0.1rem;
                img{
                    width  : 100%;
                    height : 100%;
                    display: block;
                }
            }
        }
    }
    .floor2{
        .goodsList{
            width               : 100%;
            display             : flex;
            flex-wrap           : wrap;
            padding-inline-start: 0;
            align-items         : flex-start;
            li{
                list-style: none;
                background: rgba(238,238,238,1);
                overflow  : hidden;
                transition: all 0.6s;
                &:hover img{
                    transform: scale(1.1,1.1);
                }
                &:not(:nth-child(4n+1)){
                    margin-bottom: 0.25rem;
                    margin-left  : 0.25rem
                }
                &:nth-child(4n+1){
                    box-shadow: 0px 12px 21px 3px rgba(95,92,92,0.34);
                }
                &:hover a{
                    text-decoration: none;
                }
                a{
                    color: #666;
                }
                .goodsBox{
                    width   : 2.8rem;
                    height  : 3.03rem;
                    overflow: hidden;
                    img{
                        width     : 100%;
                        height    : 100%;
                        transition: all 0.4s;
                    }
                }
                .goodsName{
                    font-size    : 0.24rem;
                    text-align   : center;
                    margin-bottom: 0;
                }
                .goodsPrice{
                    font-size : 0.18rem;
                    color     : #ffffff;
                    display   : flex;
                    margin-top: 0.14rem;
                    span{
                        display    : inline-block;
                        width      : 0.95rem;
                        height     : 0.25rem;
                        line-height: 0.25rem;
                        margin     : 0 auto;
                        background : rgba(180,157,126,1);
                        text-align : center;
                    }
                }
            }
        }
    }
    .floor3{
        img{
            width : 100%;
            height: 100%
        }
    }

    .floor4{
        margin-top: 1.41rem;
        ul{
            padding-inline-start: 0;
            display             : flex;
            li{
                list-style : none;
                width      : 2.8rem;
                height     : 4.38rem;
                margin-left: 0.27rem;
                position   : relative;
                transition : all 0.4s;
                overflow: hidden;
                &:first-child{
                    margin-left: 0;
                }
                &:last-child:hover .cover:last-child{
                    top: 0
                }
                &:hover{
                    box-shadow: 0px 12px 25px 3px rgba(95,92,92,0.34);
                }
                img{
                    width : 100%;
                    height: 100%;
                }
                .bottomTitle{
                    font-size      : 0.24rem;
                    position       : absolute;
                    display        : flex;
                    justify-content: center;
                    width          : 100%;
                    margin-bottom  : 0;
                    bottom         : 1.14rem;
                    .partFont{
                        margin: 0 auto;
                    }
                    .part2{
                        color: #b49d7e;
                    }

                }
                .cover{
                    position: absolute;
                    background: rgba(0, 0, 0, 0.36);
                    width: 100%;
                    height: 100%;
                    top: 100%;
                    color: #ffffff;
                    display: flex;
                    font-size: 0.42rem;
                    transition : all 0.5s;
                    .content{
                        display: inline-block;
                        margin: auto;
                        -webkit-user-select:none;
                        -moz-user-select:none;
                        -ms-user-select:none;
                        user-select:none;
                    }
                }
                .cilckBtn{
                    font-size      : 0.16rem;
                    position       : absolute;
                    display        : flex;
                    justify-content: center;
                    width          : 100%;
                    margin-bottom  : 0;
                    bottom         : 0.63rem;
                    cursor         : pointer;
                    color          : #ffffff;
                    span{
                        background-color: #B49D7E;
                        width           : 1rem;
                        height          : 0.4rem;
                        line-height     : 0.4rem;
                        text-align      : center;
                        -webkit-user-select:none;
                        -moz-user-select:none;
                        -ms-user-select:none;
                        user-select:none;
                    }
                }
            }
        }
    }



</style>
